<template>
  <div id="details">
    <Header title="选择车辆" />
    <div class="container">
      <div class="tab">
        <div @click="tabAction(0)" :class="['tab-item', tabSelectIndex == 0 ? 'active' : '']">默认</div>
        <div @click="tabAction(1)" :class="['tab-item', tabSelectIndex == 1 ? 'active' : '']">所有</div>
      </div><van-search v-if="tabSelectIndex==1" v-model="codeKey" left-icon="" right-icon="search" background:
      #ffffff; placeholder="请输入搜索关键词" @search="searchAction" />
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
        :offset="10"
      >
        <van-cell v-for="(item, index) in list" :key="index">
          <div
            @click="selectClick(item,0)"
            :name="item.id"
            class="table"
            v-if="tabSelectIndex==0&&$route.query.type==0"
          >
            <div class="table-row">
              <span>车牌号</span>
              <span>所属部门</span>
              <span>车型</span>
            </div>
            <div class="table-row">
              <span>{{item.car_num}}</span>
              <span>{{item.car_dept_name}}</span>
              <span>{{item.car_type_name}}</span>
            </div>
          </div>
          <div
            @click="selectClick(item,0)"
            :name="item.id"
            class="table"
            v-if="tabSelectIndex==0&&$route.query.type==1"
          >
            <div class="table-row">
              <span>驾驶员</span>
              <span>所属部门</span>
              <span>联系方式</span>
            </div>
            <div class="table-row">
              <span>{{item.user_name}}</span>
              <span>{{item.deptName}}</span>
              <span>{{item.user_phone}}</span>
            </div>
          </div>
          <div
            @click="selectClick(item,1)"
            :name="item.id"
            class="table"
            v-if="tabSelectIndex==1&&$route.query.type==1"
          >
            <div class="table-row">
              <span>驾驶员</span>
              <span>所属部门</span>
              <span>联系方式</span>
            </div>
            <div class="table-row">
              <span>{{item.user_name}}</span>
              <span>{{item.deptName}}</span>
              <span>{{item.user_phone}}</span>
            </div>
          </div>
          <div
            @click="selectClick(item,0)"
            :name="item.id"
            class="table"
            v-if="tabSelectIndex==1&&$route.query.type==0"
          >
            <div class="table-row">
              <span>车牌号</span>
              <span>所属部门</span>
              <span>车型</span>
            </div>
            <div class="table-row">
              <span>{{item.car_num}}</span>
              <span>{{item.car_dept_name}}</span>
              <span>{{item.car_type_name}}</span>
            </div>
          </div>
        </van-cell>
      </van-list>
    </div>
  </div>
</template>

<script>
import Header from "../../components/Header";

export default {
  name: "Details",
  data() {
    return {
      show: false,
      reason: "",
      apply: {},
      tabSelectIndex: 0,
      codeKey: "",
      page: 1,
      list: [],
      loading: false,
      isLoading: false,
      finished: false,
      driverName: "",
      carNum: "",
      driverId: "",
      carId: ""
    };
  },
  mounted() {
    let index = this.$route.query.index;
    let sendList = this.$store.state.sendList;
    console.log("--->", sendList);
    if (sendList[index]["driverList"]["id"] && this.$route.query.type == 0) {
      this.driverId = sendList[index].driverList.id;

      this.tabSelectIndex = 0;
    } else if (
      sendList[index]["carList"]["id"] &&
      this.$route.query.type == 1
    ) {
      this.carId = sendList[index]["carList"]["id"];
      this.tabSelectIndex = 0;
    } else {
      this.tabSelectIndex = 1;
    }
    //if(driverList[index].driverList.)

    //this.driverId = 257;
    this.getData();
  },

  methods: {
    //列表选择
    selectClick(item) {
      let sIndex = this.$route.query.index;
      let sendList = this.$store.state.sendList;

     // if (sendList[sIndex]["driverList"]["id"] != item.id) {
        if (this.$route.query.type == 0) {
          // sendList[sIndex]["driverList"]=item
          sendList[sIndex]["carList"] = item;
        } else if (this.$route.query.type == 1) {
          //  sendList[sIndex]["carList"]={}
          sendList[sIndex]["driverList"] = item;
        }
        this.$store.commit({
          type: "setSendList",
          data: sendList
        });
     // }
      this.$router.go(-1);
    },
    //tab选择
    tabAction(index) {
      this.list = [];
      this.tabSelectIndex = index;
      this.page = 1;
      this.getData();
    },
    //搜索
    searchAction() {
      this.list = [];
      this.page = 1;
      // console.log(this.codeKey)
      this.driverName = this.codeKey;
      this.getData();
    },
    //加载更多
    onLoad() {
      if (!this.isLoading) {
        this.getData();
      }
    },
    getData() {
      // if (this.tabSelectIndex == 0 && this.driverId == "") {
      //   return;
      // }
      this.$http
        .get(
          this.$route.query.type == 0
            ? "/carorder/queryListCar"
            : "/carorder/queryListDriver",
          {
            userId: localStorage.getItem("userId"),
            teamName: "",
            driverName: this.tabSelectIndex == 1 ? this.driverName : "",
            sort: "asc", //desc asc,
            carId: this.carId,
            driverId: this.driverId,
            carNum: this.carNum,
            pageNo: this.page,
            pageSize: 10
          }
        )
        .then(result => {
          console.log(result);
          this.loading = false;
          this.isLoading = false;

          this.page = this.page + 1;
          this.data = result.data;
          this.list = this.list.concat(result.data.beans);
          console.log(this.list);
          if (result.data.beans.length < 10) {
            this.finished = true;
          }
        });
    }
  },
  components: {
    Header: Header
  }
};
</script>

<style scoped>
.container {
  padding: 20px 20px 140px 20px;
}
.table {
  margin: 25px 0;
  padding: 0 20px;
  background: rgba(255, 255, 255, 1);
  box-shadow: 0px 2px 40px 0px rgba(120, 120, 120, 0.22);
  border-radius: 12px;
}
.table-row {
  display: flex;
  flex-direction: row;
  border-bottom: 1px solid rgba(235, 235, 235, 1);
}
.table-row span {
  width: 33.33%;
  padding: 36px;
  font-size: 26px;
  color: rgba(51, 51, 51, 1);

  line-height: 30px;
}
.table-row span.add-button {
  color: #3a73f6;
}
.tab {
  display: flex;
  flex-direction: row;
  padding-bottom: 20px;
}
.tab-item {
  margin-right: 20px;
  width: 120px;
  height: 64px;
  border-radius: 32px;
  border: 1px solid rgba(184, 184, 184, 1);
  font-size: 28px;
  font-weight: 400;
  color: rgba(51, 51, 51, 1);
  text-align: center;
  line-height: 64px;
}
.tab-item.active {
  background: rgba(58, 115, 246, 1);
  color: rgba(255, 255, 255, 1);
  border-color: rgba(58, 115, 246, 1);
}
</style>
